<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <!-- SITE TITLE -->
    <title>Saxon</title>

    <!-- FAVICON -->
    <link rel="icon" th:href="@{../saxon/images/favicon.png}">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{../saxon/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../saxon/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{../saxon/css/simpletextrotator.css}">
    <link rel="stylesheet" th:href="@{../saxon/css/prettyPhoto.css}">
    <link rel="stylesheet" th:href="@{../saxon/css/style.css}">

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
    <![endif]-->
</head>
<body>
<!-- PRELOADER-->
<div id="preloader">
    <div id="loader-wrapper">
        <div class="box">
            <div class="loader6"></div>
        </div>
    </div>
</div>
<!-- END PRELOADER -->
<div class="section cover-section active" id="home">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="profile-area">
                    <div class="profile-content wow fadeInDown animated" data-wow-delay="0.2s">
                        <h2>Saxon Mo</h2>
                        <p>I am a <b> <span class="rotate">Java Programmer, Web Designer</span> </b></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END OF /. COVER SECTION -->

<nav class="header-section navbar navbar-default">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav" id="top-menu">
                        <li class="active">
                            <a href="#home">
                                <img th:src="@{../saxon/images/profile-pic.jpg}" class="img-responsive" width="190"
                                     height="190" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#about">
                                <i class="fa fa-user" aria-hidden="true"></i>
                                <span>about me</span>
                            </a>
                        </li>
                        <li>
                            <a href="#resume">
                                <i class="fa fa-briefcase" aria-hidden="true"></i>
                                <span>resume</span>
                            </a>
                        </li>
                        <li>
                            <a href="#portfolio">
                                <i class="fa fa-camera" aria-hidden="true"></i>
                                <span>portfolio</span>
                            </a>
                        </li>
                        <li>
                            <a href="#news">
                                <i class="fa fa-comments" aria-hidden="true"></i>
                                <span>blog</span>
                            </a>
                        </li>
                        <li>
                            <a href="#contact">
                                <i class="fa fa-phone" aria-hidden="true"></i>
                                <span>Contact us</span>
                            </a>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div>
        </div>
    </div><!-- /.container-fluid -->
</nav>

<div class="section about-section" id="about">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="about-item">
                    <div class="row">
                        <div class="col-sm-6 wow fadeInDown animated" data-wow-delay="0.2s">
                            <div class="section-title">
                                <h3>My Beliefs </h3>
                            </div>
                            <div class="about-content">
                                <p>Man’s dearest possession is life. It is given to him but once, and he must live it so as to feel no torturing regrets for wasted years, never know the burning shame of a mean and petty past; so live that, dying, he might say: all my life, all my strength were given to the finest cause in all the world—the fight for the Liberation of Mankind</p>
                            </div>
                        </div>
                        <div class="col-sm-6 wow fadeInDown animated" data-wow-delay="0.2s">
                            <div class="section-title">
                                <h3>PERSONAL INFO</h3>
                            </div>
                            <div class="personal-info-content">
                                <p><b>Name</b> <span>Saxon Mo </span></p>
                                <p><b>Birthday</b> <span>1999.07.07 (year/day/month) </span></p>
                                <p><b>Career</b> <span>Student</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="row personal-area">
                        <div class="col-md-12">
                            <div class="section-title center">
                                <h3>INSTAGRAM</h3>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <a href="#">
                                <img th:src="@{../saxon/images/instragram/instragram1.jpg}" class="img-responsive"
                                     width="190" height="190" alt="">
                            </a>
                        </div>
                        <div class="col-sm-2">
                            <a href="#">
                                <img th:src="@{../saxon/images/instragram/instragram2.jpg}" class="img-responsive"
                                     width="190" height="190" alt="">
                            </a>
                        </div>
                        <div class="col-sm-2">
                            <a href="#">
                                <img th:src="@{../saxon/images/instragram/instragram3.jpg}" class="img-responsive"
                                     width="190" height="190" alt="">
                            </a>
                        </div>
                        <div class="col-sm-2">
                            <a href="#">
                                <img th:src="@{../saxon/images/instragram/instragram4.jpg}" class="img-responsive"
                                     width="190" height="190" alt="">
                            </a>
                        </div>
                        <div class="col-sm-2">
                            <a href="#">
                                <img th:src="@{../saxon/images/instragram/instragram5.jpg}" class="img-responsive"
                                     width="190" height="190" alt="">
                            </a>
                        </div>
                        <div class="col-sm-2">
                            <a href="#">
                                <img th:src="@{../saxon/images/instragram/instragram6.jpg}" class="img-responsive"
                                     width="190" height="190" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section resume-section" id="resume">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title center">
                    <h3>EDUCATION / EXPERIENCE</h3>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="education-item">
                    <h3>High School</h3>
                    <i>January 2015 - Dec 2018</i>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
                        quis enim. Donec pede justo,</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="education-item">
                    <h3>COLLAGE </h3>
                    <i>January 2018 - Dec 2022</i>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
                        quis enim. Donec pede justo,</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="education-item">
                    <h3>Java Learner</h3>
                    <i>January 2020 - Forever</i>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
                        quis enim. Donec pede justo,</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="education-item">
                    <h3>Web Design</h3>
                    <i>January 2020 - Forever</i>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                        mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
                        quis enim. Donec pede justo,</p>
                </div>
            </div>
        </div>
        <div class="row my-skill">
            <div class="col-md-12">
                <div class="section-title center">
                    <h3>My Skill</h3>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="section-title secound-title">
                    <h4>JAVA SKILL</h4>
                </div>
                <div class="skill">
                    <p>Mybatis</p>
                    <div class="skill-bar skill1  wow slideInLeft animated">
                        <span class="skill-count1">90%</span>
                        <div class="bg-border"></div>
                    </div>
                </div>
                <div class="skill">
                    <p>Spring</p>
                    <div class="skill-bar skill2  wow slideInLeft animated">
                        <span class="skill-count2">80%</span>
                        <div class="bg-border"></div>
                    </div>
                </div>
                <div class="skill">
                    <p>SpringMVC</p>
                    <div class="skill-bar skill3  wow slideInLeft animated">
                        <span class="skill-count3">85%</span>
                        <div class="bg-border"></div>
                    </div>
                </div>
                <div class="skill">
                    <p>Spring Boot</p>
                    <div class="skill-bar skill4  wow slideInLeft animated">
                        <span class="skill-count4">75%</span>
                        <div class="bg-border"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="section-title secound-title">
                    <h4>Web SKILL</h4>
                </div>
                <div class="skill">
                    <p>HTML5</p>
                    <div class="skill-bar skill1  wow slideInLeft animated">
                        <span class="skill-count1">90%</span>
                        <div class="bg-border"></div>
                    </div>
                </div>
                <div class="skill">
                    <p>css3</p>
                    <div class="skill-bar skill2  wow slideInLeft animated">
                        <span class="skill-count2">80%</span>
                        <div class="bg-border"></div>
                    </div>
                </div>
                <div class="skill">
                    <p>JAVASCRIPT</p>
                    <div class="skill-bar skill3  wow slideInLeft animated">
                        <span class="skill-count3">60%</span>
                        <div class="bg-border"></div>
                    </div>
                </div>
                <div class="skill">
                    <p>JQUERY</p>
                    <div class="skill-bar skill4 wow slideInLeft animated">
                        <span class="skill-count4">75%</span>
                        <div class="bg-border"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="section portfolio-section" id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title center">
                    <h3>PORTFOLIO</h3>
                </div>
            </div>
            <div class="col-md-12">
                <div class="filter-menu">
                    <ul class="button-group sort-button-group">
                        <li class="button active" data-category="all">All Photo</li>
                        <li class="button" data-category="web-design">Beauty</li>
                        <li class="button" data-category="graphic-design">Anime</li>
                        <li class="button" data-category="web-development">Cool&Alone</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row work">
            <div class="work-item web-design col-sm-3 ">
                <a th:href="@{../saxon/images/portfolio/1.jpg}" data-gal="prettyPhoto[gallery2]">
                    <img th:src="@{../saxon/images/portfolio/1.jpg}" class="img-responsive" width="254" height="254"
                         alt="">
                </a>
            </div>
            <div class="work-item graphic-design col-sm-3 ">
                <a th:href="@{../saxon/images/portfolio/2.jpg}" data-gal="prettyPhoto[gallery2]">
                    <img th:src="@{../saxon/images/portfolio/2.jpg}" class="img-responsive" width="254" height="254"
                         alt="">
                </a>
            </div>
            <div class="work-item web-development col-sm-3 ">
                <a th:href="@{../saxon/images/portfolio/3.jpg}" data-gal="prettyPhoto[gallery2]">
                    <img th:src="@{../saxon/images/portfolio/3.jpg}" class="img-responsive" width="254" height="254"
                         alt="">
                </a>
            </div>
            <div class="work-item web-design col-sm-3 ">
                <a th:href="@{../saxon/images/portfolio/4.jpg}" data-gal="prettyPhoto[gallery2]">
                    <img th:src="@{../saxon/images/portfolio/4.jpg}" class="img-responsive" width="254" height="254"
                         alt="">
                </a>
            </div>
            <div class="work-item web-development col-sm-3 ">
                <a th:href="@{../saxon/images/portfolio/5.jpg}" data-gal="prettyPhoto[gallery2]">
                    <img th:src="@{../saxon/images/portfolio/5.jpg}" class="img-responsive" width="254" height="254"
                         alt="">
                </a>
            </div>
            <div class="work-item web-design col-sm-3 ">
                <a th:href="@{../saxon/images/portfolio/6.jpg}" data-gal="prettyPhoto[gallery2]">
                    <img th:src="@{../saxon/images/portfolio/6.jpg}" class="img-responsive" width="254" height="254"
                         alt="">
                </a>
            </div>
            <div class="work-item graphic-design web-development col-sm-3 ">
                <a th:href="@{../saxon/images/portfolio/7.jpg}" data-gal="prettyPhoto[gallery2]">
                    <img th:src="@{../saxon/images/portfolio/7.jpg}" class="img-responsive" width="254" height="254"
                         alt="">
                </a>
            </div>
            <div class="work-item graphic-design col-sm-3 ">
                <a th:href="@{../saxon/images/portfolio/8.jpg}" data-gal="prettyPhoto[gallery2]">
                    <img th:src="@{../saxon/images/portfolio/8.jpg}" class="img-responsive" width="254" height="254"
                         alt="">
                </a>
            </div>
        </div>
    </div>
</div>

<div class="section news-section" id="news">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title center">
                    <h3>Stories</h3>
                </div>
            </div>
            <div class="col-md-12">
                <div class="news-item">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="news-items wow fadeInDown animated" data-wow-delay="0.2s">
                                <a href="#"><img th:src="@{../saxon/images/blog/1.jpg}" width="540" height="303" alt=""></a>
                                <h3>Two dumb love stories</h3>
                                <p>He is a mute,Although can understand others speech,Cannot say ownactually feeling,She is his neighbor,The girl who is bound by a common destiny with thegrandmother。
                                    He really looks like an elder brother,Leads her to go toschool,Accompanies her to play,Listens to her chirp with a smilegrasps the speech。
                                    He only uses the hand signal and she converses,Possible she tobe able to read his each look. Gazes at in her vision from elderbrother,She knew he has likes oneself。
                                    Afterwards,She finally tests went to college,Extremely happy,Hethen starts to go all out to make money,Then sends continuously forher. She has not rejected。
                                    Finally,She has graduated,Started the work. Then,she said firmlyto him that,“Elder brother,I must marry to you!” He looked likeonly the frightened rabbit to escape, again is not willing to seeher,how regardless of she does entreat。
                                    Do you think i pity you? Do you think i appreciate you? no, ivefallen in love with you since i was 12 .But,She can not obtain hisreply。
                                    One day,She has been admitted to the hospitalsuddenly. He has scared,Runs looks at him. Doctor said,In herthroat steadily a lump,Although has excised,Destroyed the vocalcord actually, Possibly again also could not deliver the speech. Onhospital bed,Her tearful eyes dance gaze he,Therefore theymarried。
                                    Very many years,Nobody listens to them to deliver a speech. Theyuse the hand,With pen,Converses with the look, Shares is joyful andis sad. They became have loved the object which the men and womenenvied. The people said,That pair of how happy mute husbands andwives!！
                                    Love could not prevent god of death arrival,He abandoned her towalk first。
                                    The people feared she cannot undergo loses lovers attack tocomfort her.By now, She takes back gazes at his portraitafter-image the dull crazy vision,Opens the mouth to say suddenlythat,“He walked。”
                                    </p>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="news-items wow fadeInDown animated" data-wow-delay="0.2s">
                                <a href="#"><img th:src="@{../saxon/images/blog/2.jpg}" width="540" height="303" alt=""></a>
                                <h3>1000 paper cranes</h3>
                                <p>There was once a guy who was very much in love with a girl. This romantic guy folded 1000 pieces of paper cranes as a gift to his girl. Although. at that time he was just a small executive in his company, his future didn't seem too bright, they were happy together. Until one day. his girl told him she was going to Paris and would never come back. She also told him that she can't visualize any future for the both of them. So they'd better go their own ways there and then一heartbroken, the guy agreed.
                                    When he regained his confidence, he worked hard day and night, slogging’his body and mind just to make something out of himself. finally with all these hard work and with the help of friends, this guy set up his own company.
                                    "You never foil until you stop trying," he always told himself," Imust make it in life!"
                                    On a rainy day, while this guy was driving, he saw an elderly couple sharing an umbrella in the rain walking to some destination. Even with the umbrella, they were still drenched. It didn't take him long to realize they were his ex-girlfriend's parents. With a heart in getting back at`' them, he drove slowly beside the couple, wanting them to spot him in his luxury sedan, he wanted them to know that he wasn't the same anymore, he had his own company, car, condo, etc. He had made it in life.
                                    Before the guy can realize, the couple was walking towards a cemetery, and he got out of his car and followed them... and he saw his ex-girlfriend, a photograph of her smiling sweetly as ever at him from her tombstone... and he saw his precious paper cranes in a bottle placed beside her tomb.
                                    Her parents saw him. He walked over and asked them why this had happened.
                                    They explained. She did not leave for France at all. She was stricken ill with cancer. In her heart, she had believed that he would make it someday, but she did not want her illness to be his obstacle. . .
                                    Therefore she had chosen to leave him.
                                    She asked her parents to leave his paper cranes by her side, if one day the destiny brings him here, he could take some back home.
                                    The guy just wept. The worst way to miss someone is to be sitting right beside them but knowing you can't have them and will never see them again.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section contact-section" id="contact">
    <div class="container">
        <div class="row">
            <div class="contact-item">
                <div class="col-md-12">
                    <div class="section-title center">
                        <h3>Get in Touch</h3>
                    </div>
                </div>
                <div class="col-md-8 col-md-offset-2 col-sm-12">
                    <div class="row">
                        <form class="form-horizontal">
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group name-input wow fadeInDown animated">
                                    <input type="text" class="form-control" id="name" placeholder="Your Name">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group wow fadeInDown animated">
                                    <input type="text" class="form-control" id="message-email" placeholder="Your Email">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group wow fadeInDown animated">
                                    <input type="text" class="form-control" id="website" placeholder="Your Website">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group wow fadeInDown animated">
                                    <input type="text" class="form-control" id="subject" placeholder="Your Subject">
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="input-group textarea-group wow fadeInDown animated">
                                    <textarea class="form-control message" rows="7"
                                              placeholder="Your Massage"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-12 wow fadeInDown animated contact-btn">
                                <button class=" contact-submit">Send</button>
                            </div>
                        </form><!-- end of/. form -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="copyright">Copyright &copy; 2020  saxon All rights reserved.<a target="_blank"
                                                                                                   href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- JQUERY -->
<script th:src="@{../saxon/js/vendor/jquery-1.11.2.min.js}"></script>
<script th:src="@{../saxon/js/vendor/bootstrap.min.js}"></script>
<script th:src="@{../saxon/js/isotope.pkgd.min.js}"></script>
<script th:src="@{../saxon/js/jquery.nicescroll.min.js}"></script>
<script th:src="@{../saxon/js/wow.min.js}"></script>
<script th:src="@{../saxon/js/jquery.simple-text-rotator.min.js}"></script>
<script th:src="@{../saxon/js/jquery.prettyPhoto.js}"></script>
<script th:src="@{../saxon/js/custom.js}"></script>
</body>
</html>
